<div class="crates-heading" data-test-heading>
  <UserAvatar @user={{this.model.user}} @size="medium" data-test-avatar />
  <h1 data-test-username>
    {{ this.model.user.login }}
  </h1>
  <UserLink @user={{this.model.user}} data-test-user-link>
    <img alt="GitHub profile" title="GitHub profile" src="/assets/GitHub-Mark.svg">
  </UserLink>
</div>

<div id='user-profile'>
  <div class='info'>
    {{! TODO: reduce duplication with templates/crates.hbs }}

    <div id='results'>
      <div class='nav'>
        <span class='amt small'>
          Displaying
          <span class='cur'>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
          of <span class='total'>{{ this.totalItems }}</span> total results
        </span>
      </div>

      <div class='sort'>
        <span class='small'>Sort by</span>
        <Dropdown class="dropdown-container" as |dd|>
          <dd.Trigger class="dropdown dropdown-button">
            {{svg-jar "sort"}}
            {{ this.currentSortBy }}
            <span class='arrow'></span>
          </dd.Trigger>

          <dd.Content @tagName="ul" class="dropdown">
            <li>
              <LinkTo @query={{hash sort="alpha"}}>
                Alphabetical
              </LinkTo>
            </li>
            <li>
              <LinkTo @query={{hash sort="downloads"}}>
                All-Time Downloads
              </LinkTo>
            </li>
            <li>
              <LinkTo @query={{hash sort="recent-downloads"}}>
                Recent Downloads
              </LinkTo>
            </li>
            <li>
              <LinkTo @query={{hash sort="recent-updates"}}>
                Recent Updates
              </LinkTo>
            </li>
            <li>
              <LinkTo @query={{hash sort="new"}}>
                Newly Added
              </LinkTo>
            </li>
          </dd.Content>
        </Dropdown>
      </div>
    </div>

    <div id='crates' class='white-rows'>
      {{#each this.model.crates as |crate|}}
        <CrateRow @crate={{crate}} />
      {{/each}}
    </div>

    <Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
  </div>
</div>
